<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script type="text/javascript" src="js/jquery/jquery-3.6.0.js"></script>
    <script type="text/javascript" src="js/plugin/jquery.cookie.js"></script>
    <link rel="stylesheet" type="text/css" href="js/layui/css/layui.css">
    <script type="text/javascript" src="js/layui/layui.js"></script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap-3.3.7/css/bootstrap.css">
    <script type="text/javascript" src="css/bootstrap-3.3.7/js/bootstrap.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #title{
            width: 100%;
            height: 40px;
            position: relative;
            /*border: 1px solid red;*/
        }
        #title div{
            display: inline-block;
        }
        .logo{
            width: 100px;
            height: 100%;
            /*border:1px  solid;*/
            background-image: url("img/logo.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
        #no-login,#on-login{
            width: 200px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            /*border: 1px solid;*/
            position: absolute;
            top:0;
            right: 0;
        }

        #name{
            margin-top: 5px;
            margin-right: 10px;
            vertical-align:middle;
        }
        #photo{
            vertical-align:middle;
            width: 35px;
            height: 35px;
            margin: 2px;
            background: url("img/photo.jpg") no-repeat;
            background-size: 100% 100%;
            border-radius: 100px;
            cursor: pointer;
        }
        #title > #no-login {
            /*display: none;*/
        }
        #title > #on-login {
            display: none;
        }

        #head{
            width: 100%;
            height: 100px;
            border: 1px solid transparent;
        }
        #search{
            height: 40px;
            width: 800px;
            position: relative;
            vertical-align: top;
            margin: 30px auto;
            border-radius: 11px;
        }
        #s-input{
            height: 39px;
            width: 100%;
            box-sizing: border-box;
            vertical-align: top;
            border-radius: 10px;
            padding-left: 10px;
            font-size: 15px;
            border:2px solid #FFBB33;
        }
        #s-input:focus {
            outline:none;
            border: 2px solid #2aabd2;
            border-radius: 10px;
        }
        .search-btn{
            width: 40px;
            height: 37px;
            position: absolute;
            top:1px;
            right: 1px;
            background-image: url("img/search.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            border-left: 2px solid #FFBB33;
            border-bottom-right-radius: 10px;
            border-top-right-radius: 10px;
            cursor: pointer;
        }
        #category{
            height: 50px;
            width: 900px;
            margin: 0 auto;
            line-height: 50px;
            /*border: 1px solid #d9534f;*/
        }
        #category > button {
            border-radius: 100px;
            padding: 3px 20px;
            margin-right: 3px;
        }
        #screening{
            width: 80%;
            height: 40px;
            margin: auto;
            border: 1px solid #d9534f;
        }
        #screening > span{
            display: inline-block;
            width: 50px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            margin: 0 10px 0 20px;
            font-weight: bold;
        }
        #goods-list{
            width: 80%;
            height: 100%;
            margin: 30px auto;
            /*border: 1px solid #5cb85c;*/
            text-align: center;
        }
        .goods{
            margin: 10px;
            border: 2px solid #FFBB33;
            border-radius: 10px;
            /*float: none;*/
            text-align: center;
            display: inline-block;
        }
        .goods-img{
            display: inline-block;
            margin: 10px auto;
            width: 100%;
            vertical-align:text-top;
            border-radius: 10px;
            cursor: pointer;
        }
        .goods-name{
            display: inline-block;
            text-align: center;
            box-sizing: border-box;
            padding: 3px;
            width: 100%;
            font-size: 15px;
            background: #9d9d9d;
            border-radius: 100px;
            color: #fff;
            cursor: pointer;
        }
        .buy-cart-btn{
            margin: 10px 0;
            padding: 0 15px;
        }
        .buy-btn,.addCart-btn{
            display: inline-block;
            width: 100%;
            border-radius: 100px;
        }
        .buy-btn{
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }
        .addCart-btn{
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }
        .buy-btn:active:focus{
            outline: none;
            border-color: transparent;
            box-shadow:none;
        }
        .btn:focus,
        .btn:active:focus,
        .btn.active:focus,
        .btn.focus,
        .btn:active.focus,
        .btn.active.focus {
            outline: none;
            border-color: transparent;
        }
        .buy-addCart{
            padding: 0;
        }
        .modal-dialog{
            width: 540px;
        }
        .goods-img-play{
            text-align: center;
            border: 1px solid #000000;
        }
        #img-play{
            width: 100%;
            height: 220px;
            background: url("img/goodsImg/default.jpg") no-repeat;
            background-size: 100% 100%;
        }
        #name-price{
            width: 100%;
            height: 30px;
            margin-top: 5px;
            line-height: 30px;
            box-sizing: border-box;
            /*border: 1px solid red;*/
        }
        #goodsName{
            width: 350px;
            float: left;
            color: black;
            font-weight: bold;
            /*border: 1px solid green;*/
        }
        #price{
            width: 50px;
            float: right;
            color: red;
            font-weight: bold;
            /*border: 1px solid green;*/
        }
        #summary{
            margin-bottom: 10px;
            width: 100%;
            /*border: 1px solid #2b542c;*/
        }
        .carousel-inner > .item > img {
            width: 100%;
            height: 250px;
        }
    </style>
    <script>
        $(function () {
            //页面加载完通过cookie判断用户是否登录
            checkLogin()
        });

        //通过cookie判断用户是否登录
        function checkLogin() {
            const username = $.cookie("username");
            console.log("cookie中的用户名："+username);
            if(!$.isEmptyObject(username)){
                console.log("cookie中的用户名：1 "+username);
                showPhoto(username,$.cookie("photo"));
            }
        }

        // 展示用户名称和头像
        function showPhoto(username,photo) {
            console.log("展示用户民和头像")
            $("#no-login").css("display","none")
            $("#on-login").css("display","block")
            $("#nameInfo").text(username);
            $("#photo").css("background-image","url("+photo+")");
        }

        //用户登录函数
        function login() {
            // 加载层
            var index = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2
            const userName = $('#username').val();
            const password = $('#password').val();
            console.log("账户："+userName+" 密码："+password);
            $.ajax({
                type:"POST",
                url:"/login",
                dataType: "json",
                // contentType: "application/json;charset=UTF-8", //必须这样写
                data:{userName:userName,password:password},
                success: function (data) {
                    if(data.status == 0){
                        // 清空输入框内容
                        $('#username').val('');
                        $('#password').val('');
                        // 登录成功 关闭加载层 提示登录成功  展示用户名和头像
                        $('#login-modal').modal('hide');
                        layer.close(index);
                        layer.msg(data.msg,{icon: 1});
                        // 展示用户名和头像
                        const user = data.user;
                        showPhoto(user.userName,user.photo);
                    } else {
                        // 清空密码框内容
                        $('#password').val('');
                        layer.close(index);
                        layer.msg(data.msg,{icon: 2});
                    }
                },
                error:function () {
                    layer.close(index);
                    layer.msg("系统错误请联系管理员",{icon: 2});
                }
            })
        }

        
        // 点击注册打开登录注册模态框默认选中注册
        function openReg() {
            $("#login-on").parent().attr("class","");
            $("#login-on").attr("aria-expanded","false");
            $("#register-on").parent().attr("class","active");
            $("#register-on").attr("aria-expanded","true");
            $("#login").attr("class","tab-pane fade");
            $("#register").attr("class","tab-pane fade active in");
        }

        // 注册完成后切换到登录页面
        function openLogin() {
            $("#register-on").parent().attr("class","");
            $("#register-on").attr("aria-expanded","false");
            $("#login-on").parent().attr("class","active");
            $("#login-on").attr("aria-expanded","true");
            $("#register").attr("class","tab-pane fade");
            $("#login").attr("class","tab-pane fade active in");
        }

        //用户注册函数
        function register() {
            // 加载层
            var index = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2
            const userName = $('#re-username').val();
            const password1 = $('#password1').val();
            const password2 = $('#password2').val();
            const mobile = $('#mobile').val();
            if($.trim(userName) == '') {
                layer.close(index);
                layer.msg("用户名不能为空",{icon: 2});
                return;
            }
            if($.trim(password1) == '') {
                layer.close(index);
                layer.msg("密码不能为空",{icon: 2});
                return;
            }
            if($.trim(password2) == '') {
                layer.close(index)
                layer.msg("确认密码名不能为空",{icon: 2});
                return;
            }
            if($.trim(mobile) == '') {
                layer.close(index)
                layer.msg("手机号不能为空",{icon: 2});
                return;
            }
            if(password1 != password2) {
                layer.close(index)
                layer.msg("两次密码不一致",{icon: 2});
                return;
            }

            $.ajax({
                type:"POST",
                url:"/register",
                dataType: "json",
                // contentType: "application/json;charset=UTF-8", //必须这样写
                data:{username:userName,password:password1,password2:password2,mobile:mobile},
                success: function (data) {
                    console.log(data)
                    console.log(data.status)
                    console.log(data.msg)
                    if(data.status == 0){
                        // 注册成功 关闭加载层 提示注册成功
                        $('#re-username').val('');
                        $('#password1').val('');
                        $('#password2').val('');
                        $('#mobile').val('');
                        //注册完成后切换到登录页面
                        openLogin();
                        layer.close(index);
                        layer.msg(data.msg,{icon: 1});
                    } else {
                        $('#password1').val('');
                        $('#password2').val('');
                        layer.close(index);
                        layer.msg(data.msg,{icon: 2});
                    }
                },
                error:function () {
                    layer.close(index);
                    layer.msg("系统错误请联系管理员",{icon: 2});
                }
            })
        }

    </script>
</head>
<body>
    <div id="body">
        <div id="title">
            <div class="logo"></div>
            <div id="no-login">
                您还未登录，请 <a href="#" data-toggle="modal" data-target="#login-modal">登录</a> / <a href="#" id="open-register" data-toggle="modal" data-target="#login-modal" onclick="openReg()">注册</a>
            </div>
            <div id="on-login">
                <div id="name">欢迎你 ~ <a href="#" id="nameInfo"></a></div>
                <div id="photo"></div>
            </div>
        </div>
        <div id="head">
            <div id="search">
                <input type="text" id="s-input" placeholder="请输入要搜索的商品" autocomplete="off">
                <div class="search-btn"></div>
            </div>
        </div>
        <div id="category">
            <button type="button" class="btn btn-sm btn-default" >分类</button>
            <button type="button" class="btn btn-sm btn-primary" >分类</button>
            <button type="button" class="btn btn-sm btn-success" >分类</button>
            <button type="button" class="btn btn-sm btn-info" >分类</button>
            <button type="button" class="btn btn-sm btn-warning" >分类</button>
            <button type="button" class="btn btn-sm btn-danger" >分类</button>
        </div>
<!--        <div id="screening">-->
<!--            <span>条 件：</span>-->
<!--        </div>-->
<!--        <span style="display: block;border-top: 2px solid #FFBB33;width: 80%;margin: 10px auto"></span>-->
        <div id="goods-list" class="">
            <div class="row">
                <div class="col-xs-6 col-sm-6 col-md-3 col-lg-2 goods">
                    <img class="goods-img" src="img/goodsImg/default.jpg" data-toggle="modal" data-toggle="modal" data-target="#goodsInfo-modal">
                    <span class="goods-name" data-toggle="modal" data-toggle="modal" data-target="#goodsInfo-modal">默认名称</span>
                    <div class="buy-cart-btn">
                        <div class="row">
                            <div class="col-md-6 buy-addCart">
                                <button class="buy-btn btn btn-sm btn-success">点击购买</button>
                            </div>
                            <div class="col-md-6 buy-addCart">
                                <button class="addCart-btn btn btn-sm btn-warning">加入购物车</button>
                            </div>
                        </div>
                    </div>
                </div>


            </div>
        </div>
    </div>

    <!-- 商品详情模态框 -->
    <div class="modal fade" id="goodsInfo-modal" tabindex="-1">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel" style="text-align: center">商品信息</h4>
                </div>
                <div class="modal-body">
                    <div id="myCarousel" class="carousel slide">
                        <!-- 轮播（Carousel）指标 -->
                        <ol class="carousel-indicators">
                            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                            <li data-target="#myCarousel" data-slide-to="1"></li>
                            <li data-target="#myCarousel" data-slide-to="2"></li>
                            <li data-target="#myCarousel" data-slide-to="3"></li>
                        </ol>
                        <!-- 轮播（Carousel）项目 -->
                        <div class="carousel-inner">
                            <div class="item active">
                                <img src="img/goodsImg/1.jpg" alt="First slide">
                            </div>
                            <div class="item">
                                <img src="img/goodsImg/2.jpg" alt="First slide">
                            </div>
                            <div class="item">
                                <img src="img/goodsImg/3.jpg" alt="First slide">
                            </div>
                            <div class="item">
                                <img src="img/goodsImg/default.jpg" alt="First slide">
                            </div>
                        </div>
                        <!-- 轮播（Carousel）导航 -->
                        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                    <div id="name-price">
                        <div id="goodsName">默认名称</div>
                        <div id="price">99.9 元</div>
                    </div>
                    <div id="summary">商品简介：本书以表格的形式，列出了临床常用特殊药品的剂量、规格、用法、注意事项等，旨在为广大医护人员提供一本好查、好用的特殊药品工具书，从而准确掌握特殊药品的用法、用量，为合理、安全、依法、依规的使用特殊药品，提供有益参考。</div>
                    <div class="row" style="padding: 0 15px">
                        <div class="col-md-6 buy-addCart">
                            <button class="buy-btn btn btn-sm btn-success">点击购买</button>
                        </div>
                        <div class="col-md-6 buy-addCart">
                            <button class="addCart-btn btn btn-sm btn-warning">加入购物车</button>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
<!--                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>-->
<!--                    <button type="button" class="btn btn-primary">关闭</button>-->
                </div>
            </div>
        </div>
    </div>

    <!-- 用户登录模态框 -->
    <div class="modal fade" id="login-modal" tabindex="-1">

        <div class="modal-dialog" role="document">
            <div class="modal-content" style="position: fixed;top:100px;">
                <div class="modal-header" style="border:0">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#login" id="login-on" data-toggle="tab">登录</a></li>
                        <li><a href="#register" id="register-on" data-toggle="tab">注册</a></li>
                    </ul>
                </div>
                <div class="modal-body tab-content" style="padding-top:0px">
                    <style>
                        .input-group{
                            margin:15px 0;
                        }
                    </style>
                    <!--登录-->
                    <div id="login" class="tab-pane fade in active">
                        <div class="input-group">
                            <span class="input-group-addon">账户</span>
                            <input type="text" class="form-control" id="username" placeholder="请输入用户名" autocomplete="off">
                        </div>
                        <div class="input-group">
                            <span class="input-group-addon">密码</span>
                            <input type="password" class="form-control" id="password" placeholder="请输入密码" autocomplete="off">
                        </div>
                        <div class="btn btn-success" style="width: 100%;margin: 15px auto" onclick="login()">点击登录</div>
                    </div>
                    <!--注册-->
                    <div id="register" class="tab-pane fade">
                        <div class="input-group">
                            <span class="input-group-addon">账户</span>
                            <input type="text" class="form-control" id="re-username" placeholder="请输入用户名" autocomplete="off">
                        </div>
                        <div class="input-group">
                            <span class="input-group-addon">密码</span>
                            <input type="password" class="form-control" id="password1" placeholder="请输入密码" autocomplete="off">
                        </div>
                        <div class="input-group">
                            <span class="input-group-addon">确认密码</span>
                            <input type="password" class="form-control" id="password2" placeholder="请再次输入密码" autocomplete="off">
                        </div>
                        <div class="input-group">
                            <span class="input-group-addon">手机号</span>
                            <input type="text" class="form-control" id="mobile" placeholder="请输入手机号" autocomplete="off">
                        </div>
<!--                        <div class="input-group">-->
<!--                            <span class="input-group-addon">验证</span>-->
<!--                            <span class="input-group-addon" style="letter-spacing: 5px;border-right: 0;">3+3=？</span>-->
<!--                            <input type="text" class="form-control" id="verifyCode" placeholder=" 验证码（暂时未做，需要redis做缓存）" autocomplete="off">-->
<!--                            <span class="input-group-addon btn btn-info" style="background: #5bc0de;color:#fff;border: 1px solid #5bc0de"> 点击验证 </span>-->
<!--                        </div>-->
                        <div class="btn btn-success" style="width: 100%;margin: 15px auto" onclick="register()">点击注册</div>
                    </div>

                </div>
            </div>
        </div>
    </div>


</body>
</html>